<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>功能实现</title>
		<script src="jquery-1.11.1(1).js"></script>
		<!-- Jquery操作动画
		    show（）        功能：显示效果 本质：display：block
			hide（）        功能：隐藏效果 本质：display：none
			
			slideDown（）       功能：向下（滑动式）效果
			slideUp()           功能：向上（滑动式）效果
			
			fadeIn（）          功能：淡入 本质：显示+透明度：（0——1）
			fadeOut（）         功能：淡出 本质：隐藏+透明度：（1——0）
			-->
		<style>
			div{
				width: 500px;
				height: 500px;
				background: #00ff7f;
				display: none;
			}
		</style>
	</head>
	<body>
		<button id="show">显示按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="sd">下滑出按钮</button>
		<button id="sb">上划入按钮</button>
		<button id="sp">淡入按钮</button>
		<button id="sq">淡出按钮</button>
		
		<div></div>
		<script>
			/* JQ 动画:显示与隐藏 */
			$("#show").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").show();
			});
			$("#hide").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").hide();
			});
			$("#sd").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").slideDown();
			});
			$("#sb").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").slideUp();
			});
			$("#sp").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").fadeIn(600);
			});
			$("#sq").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").fadeOut(600);
			});
			
			
			/* $("button").click(function(){
				//隐藏：css属性直接给元素设置
				$("div").css("display","block").css("border-radius","50%").css("background","#ff00ff");
			}); */
			
		</script>
	</body>
</html>